<template>
    <div class="marLR20">
        <div class="tableWrapper marT20 padd20">
            <el-row :gutter="20">
                <el-tag :type="isCerShow ? '' : 'warning'" style="cursor:pointer;" @click.stop.native="toggle('附件有效期')">附件有效期</el-tag>
                <el-tag :type="isAnnShow ? '' : 'warning'" style="cursor:pointer;" @click.stop.native="toggle('提醒日期')">提醒日期</el-tag>
            </el-row>
        </div>

        <!-- 附件有效期 -->
        <el-row class=" marT20" v-show="isCerShow">
            <el-col :span="24">
                <span class="timeLabel">身份证</span>
                <div class="inputTxtWrapper" style="display:inline-block;">
                    <el-date-picker
                        class="marR5"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        v-model="cardNumTime.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <p class="tipRed marT10 paddL60" v-show="isCardNumTipShow">身份证必填!</p>
            </el-col>
            <el-col :span="24" class="marT20">
                <span class="timeLabel">驾驶证</span>
                <div class="inputTxtWrapper" style="display:inline-block;">
                    <el-date-picker
                        class="marR5"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        v-model="driverTime.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </el-col>
            <el-col :span="24" class="marT20">
                <span class="timeLabel">交强险</span>
                <div class="inputTxtWrapper" style="display:inline-block;">
                    <el-date-picker
                        class="marR5"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        v-model="trafficTime.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </el-col>
            <el-col :span="24" class="marT20">
                <span class="timeLabel">商业险</span>
                <div class="inputTxtWrapper" style="display:inline-block;">
                    <el-date-picker
                        class="marR5"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        v-model="commercialTime.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </el-col>

            <el-col :span="24" class="marT20">
                <span class="timeLabel">行驶证</span>
                <div class="inputTxtWrapper" style="display:inline-block;">
                            <el-date-picker
                                v-show = "!isHasDrivingEndTime"
                                class="inputTxtWrapper marR10 minWidth350"
                                v-model="drivingTime.startTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                :editable = "false"
                                placeholder="请选择开始日期">
                            </el-date-picker>
                            <el-date-picker
                                ref = "drivingTimeDom"
                                v-show = "isHasDrivingEndTime"
                                class="marR5"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                v-model="drivingTime.time"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                </div>
                <el-radio-group v-model="isHasDrivingEndTime" @change = "changeDrivingTime">
                    <el-radio :label = true>永久</el-radio>
                    <el-radio :label = false>非永久</el-radio>
                </el-radio-group>
            </el-col>

            <div class="paddL60">
                <button class="operatBtn  marT20" @click.stop="addCerTime">提交</button>
            </div>
        </el-row>

        <!-- 提醒日期 -->
        <div v-show="isAnnShow" class="marT20">
            <el-form ref="annFrm" :model="annFrm" :rules="annFrmRules" class="marT10" :inline="true" hide-required-asterisk=true label-width="80px" v-show="isAnnFrmShow">
                <el-row>
                    <el-col :span="8" :lg="8" :md="12">
                        <el-form-item label="日期" prop="annTime">
                            <el-date-picker
                            class="inputTxtWrapper"
                            v-model="annFrm.annTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            :editable = "false"
                            placeholder="请选择提醒日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :lg="8" :md="12">
                        <el-form-item label="提醒内容" prop="annName">
                            <el-input v-model.trim="annFrm.annName" placeholder="请输入提醒内容" maxlength='50' class="inputTxtWrapper"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div class="marB20 font14" v-show="!isAnnFrmShow">
                <el-row class="headerRowClass borderT1">
                    <el-col :span="24">
                        <el-table
                            :data="annList"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="annName"
                            align="center"
                            label="名称">
                            </el-table-column>
                            <el-table-column
                            prop="annTime"
                            align="center"
                            label="日期">
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            align="center"
                            label="操作">
                                <template slot-scope="scope">
                                    <span title="修改" class="marR15"  style="cursor:pointer;"><icon name="change" class="scaleIcon1" @click.native.stop="editShowAnnFrm(scope.row.annId,scope.$index)"></icon></span>
                                    <span title="删除" class="marR15"  style="cursor:pointer;"><icon name="del" class="scaleIcon1" @click.native.stop="deleteAnn(scope.row.annId,scope.$index)"></icon></span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </div>

             <div class="btnGroup">
                    <button class="operatBtn marT20" @click.stop="showAnnFrm" v-show="!isAnnFrmShow">添加</button>
                    <button class="operatBtn marT20" @click.stop="cancel" v-show="isAnnFrmShow">取消</button>
                    <button class="operatBtn marT20" @click.stop="addAnn" v-show="isAnnFrmShow && isAddorEdit">确认提交</button>
                    <button class="operatBtn marT20" @click.stop="editAnn" v-show="isAnnFrmShow && !isAddorEdit">确认修改</button>
            </div>
            
        </div>
    </div>
</template>

<script>
import http from '@/assets/js/http'
import _g from '@/assets/js/global'


export default {
    data(){
        return {
            userId : null,//    所属用户id

            /* 附件有效期 */
            isCerShow : true,// 附件有效期默认显示

            // 身份证
            cardNumTime: {
                time : null,
                cerId : null,
            },
            isCardNumTipShow : false,// 提示为空默认隐藏
            // 驾驶证
            driverTime: {
                time : null,
                cerId : null,
            },
            // isDriverTipShow : false,// 提示为空默认隐藏
            // 行驶证
            // drivingTime: {
            //     startTime : null,
            //     endTime : null,
            //     cerId : null,
            // },
            isHasDrivingEndTime : true,//   默认有行驶证结束时间
            drivingTime: {
                startTime : null,// 行驶证开始时间
                time : null,        //  行驶证开始时间与结束时间
                cerId : null,
            },
            // 交强险
            trafficTime: {
                time : null,
                cerId : null,
            },
            //  isTrafficTipShow : false,// 提示为空默认隐藏
            // 商业险
            commercialTime: {
                time : null,
                cerId : null,
            },
            // isCommercialTipShow : false,// 提示为空默认隐藏

            /* 提醒日期 */
            isAnnShow : false,//    提醒日期默认隐藏
            annList : [],// 提醒日期列表

            annFrm:{
                annTime:'',  //  提醒日期
                annName:'',  //  提醒内容
            },
            annList:[],                                                      //  家庭人员列表
            isAnnFrmShow:false,                                      //  默认隐藏提醒日期表单
            isAddorEdit:true,                                                   //  默认为确认提交按钮
            currEditorAnn:{
                annId:null,                                              //  当前修改的提醒日期的id
                index:null,                                              //  当前修改的提醒日期的数组索引
            },

            // 提醒日期校验
            annFrmRules:{
                annTime: [{
                        required: true,
                        message: "请输入提醒日期",
                        trigger: "blur"
                    }
                ],
                annName: [{
                        required: true,
                        message: "请输入提醒内容",
                        trigger: "blur"
                    }
                ],
            },
        }
    },
    created() {
        this.userId = this.$route.query.userId
        this.getAllCerTimeAndAnn()
    },
    methods: {
        /* 行驶证永久与非永久时间清空 */
        changeDrivingTime(){
            const isHasDrivingEndTime = this.isHasDrivingEndTime
            const drivingTime = this.drivingTime
            if(!isHasDrivingEndTime && drivingTime.time !== null){//  如果行驶证时间选的是永久，且选择了永久时间
                this.drivingTime.startTime = drivingTime.time[0]
            }
        },
        /* 面板切换 */
        toggle(str){
            if(str === '附件有效期'){
                this.isCerShow = true
                this.isAnnShow = false
            }else if(str === '提醒日期'){
                this.isCerShow = false
                this.isAnnShow = true
                this.isAnnFrmShow = false
            }
        },
         /* 查询某人所有附件有效期和提醒日期 */
        getAllCerTimeAndAnn(){
            const that = this
            const userId = that.userId
            let annList = []

            _g.showLoading('加载中')
            that.apiPost('admin/cerTime/getAllCerTimeAndAnn',{userId}).then((res) => {
                _g.showLoading().close()
                if(typeof res === 'string'){
                    res = JSON.parse(res)
                }
                if (res.code != 200) {
                    that.handleError(res)
                } else {
                    if(res.data.isSuccess === 0){             //  成功
                        // 附件有效期初始化
                        for(let item of res.data.cerTimeList){
                            if(item.cer_type === 1){//  身份证
                                that.cardNumTime.time = [item.cer_start_time,item.cer_end_time]
                            }else if(item.cer_type === 2){//    驾驶证
                                that.driverTime.time = [item.cer_start_time,item.cer_end_time]
                            }else if(item.cer_type === 3){//    行驶证
                                if(item.cer_end_time === null){//   如果只有开始时间
                                    that.drivingTime.startTime = item.cer_start_time
                                    that.isHasDrivingEndTime = false
                                    that.drivingTime.time = null
                                }else{
                                    that.drivingTime.time = [item.cer_start_time,item.cer_end_time]
                                    that.drivingTime.startTime = null
                                }
                            }else if(item.cer_type === 4){//    交强险
                                that.trafficTime.time = [item.cer_start_time,item.cer_end_time]
                            }else if(item.cer_type === 5){//    商业险
                                that.commercialTime.time = [item.cer_start_time,item.cer_end_time]
                            }
                            // if(item.cer_type === 1){//  身份证
                            //     if(item.cer_start_time !== null){
                            //         that.cardNumTime.time = [item.cer_start_time,item.cer_end_time]
                            //     }
                            //     that.cardNumTime.cerId = item.id
                            // }else if(item.cer_type === 2){//    驾驶证
                            //     if(item.cer_start_time !== null){
                            //         that.driverTime.time = [item.cer_start_time,item.cer_end_time]
                            //     }
                            //     that.driverTime.cerId = item.id
                            // }else if(item.cer_type === 3){//    行驶证
                            //     if(item.cer_start_time !== null){
                            //        that.drivingTime.time = [item.cer_start_time,item.cer_end_time]
                            //     }
                            //     that.drivingTime.cerId = item.id
                            // }else if(item.cer_type === 4){//    交强险
                            //     if(item.cer_start_time !== null){
                            //         that.trafficTime.time = [item.cer_start_time,item.cer_end_time]
                            //     }
                            //     that.trafficTime.cerId = item.id
                            // }else if(item.cer_type === 5){//    商业险
                            //     if(item.cer_start_time !== null){
                            //         that.commercialTime.time = [item.cer_start_time,item.cer_end_time]
                            //     }
                            //     that.commercialTime.cerId = item.id
                            // }
                        }
                        // 提醒日期初始化
                        for(let item of res.data.annList){
                            annList.push({
                                annId : item.id,
                                annName : item.ann_name,
                                annTime : item.ann_time,
                            })
                        }
                        that.annList = annList

                    }else{
                        _g.toastMsg("error", res.message)
                    }
                }
            })
        },

        /* 新增 / 编辑附件有效期 */
        addCerTime(cerType){
            const that = this
            const userId = that.userId

            const isHasDrivingEndTime = this.isHasDrivingEndTime

            if(that.cardNumTime.time === null ){
                that.isCardNumTipShow = true
                return
            }else{
                that.isCardNumTipShow = false
            }

            let cerStr = ''
            let cardNumStr = `cerType=1`
            if(that.cardNumTime.time !== null){
                cardNumStr += `,cerStartTime=${that.cardNumTime.time[0]},cerEndTime=${that.cardNumTime.time[1]}`
                cerStr += cardNumStr
            }
            let driverStr = `|cerType=2`
            if(that.driverTime.time !== null){
                driverStr += `,cerStartTime=${that.driverTime.time[0]},cerEndTime=${that.driverTime.time[1]}`
                cerStr += driverStr
            }

            let drivingStr = `|cerType=3`

            if(isHasDrivingEndTime){//  如果行驶证时间选择了永久
                if(that.drivingTime.time  !== null){
                    drivingStr += `,cerStartTime=${that.drivingTime.time[0]},cerEndTime=${that.drivingTime.time[1]}`
                    cerStr += drivingStr
                }
            }else{//    如果行驶证时间选择的不是永久
                if(that.drivingTime.startTime  !== null){
                    drivingStr += `,cerStartTime=${that.drivingTime.startTime},cerEndTime=`
                    cerStr += drivingStr
                }
            }

            let trafficStr = `|cerType=4`
            if(that.trafficTime.time !== null){
                trafficStr += `,cerStartTime=${that.trafficTime.time[0]},cerEndTime=${that.trafficTime.time[1]}`
                cerStr += trafficStr
            }

            let commercialStr = `|cerType=5`
            if(that.commercialTime.time  !== null){
                commercialStr += `,cerStartTime=${that.commercialTime.time[0]},cerEndTime=${that.commercialTime.time}`
                cerStr += commercialStr
            }
            
            that.$confirm('是否确认提交?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                    _g.showLoading('提交中')
                that.apiPost('admin/cerTime/addBatch',{userId,cerStr}).then((res) => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if (res.code != 200) {
                        that.handleError(res)
                    } else {
                        if(res.data.isSuccess === 0){             //  成功
                            _g.toastMsg("success", res.message)
                            that.getAllCerTimeAndAnn()
                        }else if(res.data.isSuccess === 1){
                            _g.toastMsg("error", res.message)
                        }
                    }
                })
            }).catch(() => {})
        },

        // /* 新增 / 编辑附件有效期 */
        // addCerTime(cerType){
        //     const that = this
        //     const userId = that.userId
        //     if(that.cardNumTime.time === null ){
        //         that.isCardNumTipShow = true
        //         return
        //     }else{
        //         that.isCardNumTipShow = false
        //     }

        //     let cardNumStr = `cerType=1,cerId=${that.cardNumTime.cerId}`
        //     if(that.cardNumTime.time !== null){
        //         cardNumStr += `,cerStartTime=${that.cardNumTime.time[0]},cerEndTime=${that.cardNumTime.time[1]}`
        //     }else{
        //         cardNumStr += ",cerStartTime=,cerEndTime="
        //     }
            
        //     let driverStr = `|cerType=2,cerId=${that.driverTime.cerId}`
        //     if(that.driverTime.time !== null){
        //         driverStr += `,cerStartTime=${that.driverTime.time[0]},cerEndTime=${that.driverTime.time[1]}`
        //     }else{
        //         driverStr += ",cerStartTime=,cerEndTime="
        //     }

        //     let drivingStr = `|cerType=3,cerId=${that.drivingTime.cerId}`
        //     if(that.drivingTime.time  !== null){
        //         drivingStr += `,cerStartTime=${that.drivingTime.time[0]},cerEndTime=${that.drivingTime.time[1]}`
        //     }else{
        //         drivingStr += ",cerStartTime=,cerEndTime="
        //     }

        //     let trafficStr = `|cerType=4,cerId=${that.trafficTime.cerId}`
        //     if(that.trafficTime.time !== null){
        //         trafficStr += `,cerStartTime=${that.trafficTime.time[0]},cerEndTime=${that.trafficTime.time[1]}`
        //     }else{
        //         trafficStr += ",cerStartTime=,cerEndTime="
        //     }

        //     let commercialStr = `|cerType=5,cerId=${that.commercialTime.cerId}`
        //     if(that.commercialTime.time  !== null){
        //         commercialStr += `,cerStartTime=${that.commercialTime.time[0]},cerEndTime=${that.commercialTime.time}`
        //     }else{
        //         commercialStr += ",cerStartTime=,cerEndTime="
        //     }
            
        //     const cerStr = cardNumStr + driverStr + drivingStr + trafficStr + commercialStr

        //     that.$confirm('是否确认提交?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning',
        //         center: true
        //     }).then(() => {
        //             _g.showLoading('提交中')
        //         that.apiPost('admin/cerTime/addBatch',{userId,cerStr}).then((res) => {
        //             _g.showLoading().close()
        //             if(typeof res === 'string'){
        //                 res = JSON.parse(res)
        //             }
        //             if (res.code != 200) {
        //                 that.handleError(res)
        //             } else {
        //                 if(res.data.isSuccess === 0){             //  成功
        //                     _g.toastMsg("success", res.message)
        //                     that.getAllCerTimeAndAnn()
        //                 }else if(res.data.isSuccess === 1){
        //                     _g.toastMsg("error", res.message)
        //                 }
        //             }
        //         })
        //     }).catch(() => {})
        // },
        
        /* 显示新增提醒日期表单 */
        showAnnFrm(){
            this.isAnnFrmShow = true
            this.isAddorEdit = true                             //  确认提交按钮
        },
              
        /* 取消新增或编辑提醒日期 */
        cancel(){
            this.isAnnFrmShow = false
            this.annFrm.annTime = ''
            this.annFrm.annName = ''
            this.$refs.annFrm.resetFields()
        },

       /* 新增提醒日期 */
        addAnn(){
            const that = this
            const data = that.annFrm
            data.userId = that.userId
            data.isBackstageSubmit = 1
            that.$refs['annFrm'].validate(valid => {
                if (valid) {
                    that.$confirm('是否确认新增?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(() => {
                            _g.showLoading('提交中')
                            that.apiPost('/admin/ann/add',data).then((res) => {
                            _g.showLoading().close()
                            if(typeof res === 'string'){
                                    res = JSON.parse(res)
                                }
                                if (res.code != 200) {
                                    that.handleError(res)
                                } else {
                                    if(res.data.isSuccess === 0){
                                        _g.toastMsg("success", res.message)

                                        that.annList.push({
                                            annTime : data.annTime,
                                            annName : data.annName,
                                            annId : res.data.id
                                        })
                                        that.isAnnFrmShow = false                                //  隐藏表单

                                        // 重置表单
                                        that.annFrm.annName = ''
                                        that.annFrm.annTime = ''

                                        that.$refs.annFrm.resetFields()

                                    }else if(res.data.isSuccess === 1){
                                        _g.toastMsg("error", res.message)
                                    }else if(res.data.isSuccess === 2){
                                        _g.toastMsg("warning", res.message)
                                    }
                                }
                        })
                    }).catch(() => {})
                }
            })
        },

    /* 删除提醒日期 */  
      deleteAnn(annId,index){
        const that = this
        that.$confirm('是否确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
        }).then(() => {
                _g.showLoading('删除中')
                that.apiPost('/admin/ann/delete',{annId}).then((res) => {
                _g.showLoading().close()
                if(typeof res === 'string'){
                        res = JSON.parse(res)
                    }
                    if (res.code != 200) {
                        that.handleError(res)
                    } else {
                        if(res.data.isSuccess === 0){
                            _g.toastMsg("success", res.message)
                            that.annList.splice(index,1)

                        }else if(res.data.isSuccess === 1){
                            _g.toastMsg("error", res.message)
                        }
                    }
            })
        }).catch(() => {})
      },
        
    /* 编辑提醒日期 */  
      editShowAnnFrm(annId,index){
        const that = this
        that.isAnnFrmShow = true                           //  显示表单
        that.isAddorEdit = false                                      //  修改按钮
        that.annFrm.annName = that.annList[index].annName
        that.annFrm.annTime = that.annList[index].annTime

        // 当前被编辑的提醒日期 
        that.currEditorAnn.annId = annId
        that.currEditorAnn.index = index

      },

        /* 确认修改提醒日期 */
      editAnn(){
          const that = this
         
          const annId = that.currEditorAnn.annId
          const index = that.currEditorAnn.index
          
           let data = {
               annId,
               annName :  that.annFrm.annName,
               annTime : that.annFrm.annTime,
               isBackstageSubmit : 1
          }

          that.$refs['annFrm'].validate(valid => {
              if (valid) {
                that.$confirm('是否确认修改?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
                }).then(() => {
                        _g.showLoading('提交中')
                        that.apiPost('/admin/ann/add',data).then((res) => {
                        _g.showLoading().close()
                        if(typeof res === 'string'){
                                res = JSON.parse(res)
                            }
                            if (res.code != 200) {
                                that.handleError(res)
                            } else {
                                if(res.data.isSuccess === 0){
                                    _g.toastMsg("success", res.message)



                                    that.annList.splice(index,1,data)

                                    that.isAnnFrmShow = false                                //  隐藏表单

                                    // 重置
                                    that.annFrm.annName = ''
                                    that.annFrm.annTime = ''
                                    that.currEditorAnn.annId = null
                                    that.currEditorAnn.index = null

                                    that.$refs.annFrm.resetFields()

                                }else if(res.data.isSuccess === 1){
                                    _g.toastMsg("error", res.message)
                                }else if(res.data.isSuccess === 2){
                                    _g.toastMsg("warning", res.message)
                                    that.isAnnFrmShow = false                                //  隐藏表单
                                    that.$refs.annFrm.resetFields()
                                }
                            }
                    })
                }).catch(() => {})
              }
          })
      },
    },
    mixins: [http]
}
</script>

<style lang="less" scoped>
.timeLabel{
    font-size: 14px;
    color: #606266;
    width: 54px;
    display: inline-block;
}
</style>


